<template> 	
  <div class="page">
	<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						
						<div class="layui-card-body">							
							<div class="layui-form" lay-filter="">
								<div class="layui-form-item" v-if="showpage==0">
										<!--<div class="nodate" v-if="ggcslist.length==0">请先添加规格</div>-->
										<div class="gglist" ><!--v-else-->
											<dl v-for="(item,index) in gglist" class="specValBox" :id="item.id">
												<dt><span @click="del(index)">删除</span>{{item.name}}</dt>
												<dd>
													<ul>
														<!--<li v-for="it in item.content" :rel="it.id" @click="xzgg($event)">{{it.content}}</li>-->
														<li>名称：{{item.cartesian.specification}}  剩余库存：{{item.saleStock.stockAmount}}  ￥{{item.price.specialPrice/100}}</li>
													</ul>
												</dd>
											</dl>
										</div>
										<button class="layui-btn layui-btn-normal" @click="confirmOk">生成货品</button>
										<button class="layui-btn layui-btn-warm" @click="addgg">添加规格</button>
								</div>
								<!--<div class="layui-form-item" v-else>
										<div class="gg">
											 <ul>
											 	<li v-for="item in ggcslist" @click="choose(item.id,item.name)">{{item.name}}</li>
											 </ul>
										</div>
										<button class="layui-btn layui-btn-normal" @click="cancal">取消</button>
								</div>-->
								
							</div>
						</div>
					</div>
				</div>
			</div>
	</div>		
  </div> 
</template>
<script>

export default {	
  name: 'ucgglist',  
  data () {
    return { 
    	id:'',//商品id
    	shopId:'',
    	gglist:[],
    	ggcslist:[],
    	showpage:0,
    	list:[],
    }
  },
  mounted(){ 
    var _this = this;
  	window.getdates = this.getdates;	
  },
  methods: {  	
		getdates:function(data){
			var _this = this; 			
			this.id=data.id;
			this.shopId=data.shopId;
			this.list=data
			//alert(JSON.stringify(data))
		  if(this.list.itemSpecificationList.length>0){
		  	 this.gglist=data.itemSkuList;
		  	 this.showpage=0;
		  }else{
		  	layer.msg("该商品暂无规格")
		  }
			
		},		
		cancal:function(){
			this.showpage=0;
		},
		choose:function(id,name){
			var _this = this;
			var url = "/category/getSpecificationValueBySpecificationId";
  		var data={
  			specificationId:id
  		}
  		ajaxRequest(url,'GET','json',data,function(ret,err){ 
  			var arr=_this.gglist;
  			var is=0;
  			for(var i=0;i<arr.length;i++){
  				if(arr[i].id==id){
  						is=1;
  				}
  			}
  			if(is==1){
  				layer.msg("规格已经选择过了")
  			}
  			else{
	    		var obj={
	    			id:id,
	    			name:name,
	    			content:ret.content
	    		}
	    		if(ret.content.length>0){
	    			_this.gglist.push(obj);
    				_this.showpage=0;
    			}
	    		else{
	    			layer.msg("此规格无规格值")
	    		}
    	  }
  		})
		},
		del:function(index){
			var arr=this.gglist;
			arr.splice(index,1);
			this.gglist=arr;
		},
		addgg:function(){
			return ;
			var _this = this;
			var url = "/category/getSpecificationByCategoryId";
  		var data={
  			categoryId:this.id
  		}
  		ajaxRequest(url,'GET','json',data,function(ret,err){ 
    		_this.ggcslist=ret.content
    		_this.showpage=1;
  		})
		},
		xzgg:function(e){
			if($(e.target).hasClass("clicked")){
				$(e.target).removeClass("clicked")
			}
			else{
				$(e.target).addClass("clicked")
			}
		},
		confirmOk:function(){
			return;
			var arr=new Array();
	    var is=1;
	    $(".specValBox").each(function(i){
	        var id=$(this).attr("id");
	        if($(this).find("li.clicked").length==0){
	           is=0;
	        }
	        else{
	            arr[i]=new Array();
	            $(this).find("li.clicked").each(function(e){
	                arr[i][e]= $(this).attr("rel") + ":"+$(this).text() + ":" + id;
	            })
	            
	        }
	    })
	    if(is!=0&&arr!=""){
				var a=arr;
		    var n=a.length;
        var r = [];
        var f=[];
        for(i=0; i< a.length; i++) {
            var len = r.length;
            for(var v in a[i]) 
            r.push([a[i][v]]);
            for(var j=0; j< len; j++) {
              for(var v in a[i]) 
                r.push(r[j].concat(a[i][v]));
            }
        }
        for(var i=0;i< r.length;i++){
            if(r[i].length==n){
                f.push(r[i]);
            }
        }

        parent.dogg(f);
        var index = parent.layer.getFrameIndex(window.name);	          	
			  parent.layer.close(index);
			  
	    }
	    else{
	        alert('有规格没有选择规则值');
	    }
		}
  },
  updated:function(){		
		layui.use('form', function(){
		  var form = layui.form;
		  form.render();
		   form.on("select(status)", function(data){										
			   _this.status = data.value
		  });
		});
		
  },
}
</script>
<style>
	#J_imageView img{width:400px;display:block;}
	.nodate{padding:30px 0;text-align: center;}
	.gg li{padding:10px 0;border-bottom:1px solid #eee;}
	.gg{padding-bottom:20px;}
	.gglist dl{margin-bottom:30px;}
	.gglist dl dt{padding:10px 0;}
	.gglist dl dt span{float:right;color:red;}
	.gglist dl dd{border:1px solid #eee;padding:10px;height:100px;overflow-y:scroll;}
	.gglist dl dd li{display:inline-block; vertical-align: top;margin:0 10px 10px 0;width:200px;text-align: center;height:30px;line-height:30px;cursor:pointer;overflow:hidden;border:1px solid #eee;}
	li.clicked{ background-color: #1E9FFF;color:#fff;}
</style>
